<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>组件化</title>
  </head>

  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <my-cpn></my-cpn>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      ///1.创建组件构造器对象
      const cpnC = Vue.extend({
        template: `<div>
                 <h1>我是导航条</h1>
                 <h1>我是内容</h1>
                 <h1>我是底部</h1>
             </div>`
      });
      //2.注册组件
      Vue.component('my-cpn', cpnC);
      const app = new Vue({
        el: "#app",
        data: {
          message: "你好，世界",
        }
      })
    </script>
  </body>

</html>